<template>
	<view class="content">
		<view class="mix-tree-list">
			<block v-for="(item, index) in treeList" :key="index" v-if="item.name">
				<view 
					class="mix-tree-item"
					:style="[{
							paddingLeft: item.rank*15 + 'px',
							zIndex: item.rank*-1 +50
						}]"
					:class="{
							border: treeParams.border === true,
							show: item.show,
							last: item.lastRank,
							showchild: item.showChild
						}"
					@click.stop="treeItemTap(item, index)"
				>
					<image class="mix-tree-icon" :src="item.lastRank ? treeParams.lastIcon : item.showChild ? treeParams.currentIcon : treeParams.defaultIcon"></image>
					{{item.name}}
					<view style="position: absolute;right:20rpx;top:50%;transform: translateY(-50%);" v-if="item.checked">
						<u-icon  color="#409EFF" name="checkbox-mark"></u-icon>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				
				default(){
					return '1';
				}
			},
			list: {
				type: Array,
				default(){
					return [];
				}
			},
			keyWord: {
				type: String,
				default(){
					return 'name';
				}
			},
			params: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				treeList: [],
				treeParams: {
					defaultIcon: '/static/mix-tree/defaultIcon.png',
					currentIcon: '/static/mix-tree/currentIcon.png',
					lastIcon: '',
					border: false
				}
			}
		},
		watch: {
			list(list){
				
				this.treeParams = Object.assign(this.treeParams, this.params);
				console.log(this.treeParams, this.params);
				this.renderTreeList(list);
			}
		},
		methods: {
			//扁平化树结构
			renderTreeList(list=[], rank=0, parentId=[]){
				
				list.forEach(item=>{
					var obj={
						id: item.id,
						name: item[this.keyWord],
						parentId,  // 父级id数组
						rank,  // 层级
						showChild: false,  //子级是否显示
						show: rank === 0,// 自身是否显示
						item:item,
						checked:item.checked,
						userId:item.userId
					}
					if(item.hasOwnProperty('value')){
						obj.value=item.value
					}
					this.treeList.push(obj)
					if(Array.isArray(item.children) && item.children.length > 0){
						let parents = [...parentId];
						parents.push(item.id);
						this.renderTreeList(item.children, rank+1, parents);
					}else{
						this.treeList[this.treeList.length-1].lastRank = true;
					}
				})
			},
			// 点击
			treeItemTap(item,index){
				let list = this.treeList;
				// console.log(list,index)
				let id = item.id;
				if(item.lastRank === true){
					//点击最后一级时触发事件
					if(this.type==1){//多选
						if(this.treeList[index].checked){
							this.treeList[index].checked=false
						}else{
							this.treeList[index].checked=true
						}
					}else{//单选
						if(this.treeList[index].checked){
							this.treeList[index].checked=false
						}else{
							this.treeList.forEach(item2=>{
								item2.checked=false
							})
							this.treeList[index].checked=true
						}
					}
					
					this.$forceUpdate()
					this.$emit('treeItemClick',item,this.treeList);
					return;
				}
				item.showChild = !item.showChild;
				list.forEach(childItem=>{
					if(item.showChild === false){
						//隐藏所有子级
						if(!childItem.parentId.includes(id)){
							return;
						}
						if(childItem.lastRank !== true){
							childItem.showChild = false;
						}
						childItem.show = false;
					}else{
						if(childItem.parentId[childItem.parentId.length-1] === id){
							childItem.show = true;
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
	.mix-tree-list{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
	}
	.mix-tree-item{
		display: flex;
		align-items: center;
		font-size: 30upx;
		color: #333;
		height: 0;
		opacity: 0;
		transition: .2s;
		position: relative;
	}
	.mix-tree-item.border{
		border-bottom: 1px solid #eee;
	}
	.mix-tree-item.show{
		height: 80upx;
		opacity: 1;
	}
	.mix-tree-icon{
		width: 26upx;
		height: 26upx;
		margin-right: 8upx;
		opacity: .9;
	}
	
	.mix-tree-item.showchild:before{
		transform: rotate(90deg);
	}
	.mix-tree-item.last:before{
		opacity: 0;
	}
</style>
